<template>
  <div class="echartSty">
    <!-- :style="{position: outsidePosition ? '' : 'relative'}" -->
    <a-spin
      class="spinSty"
      v-show="echartShowStatus===1"
    />
    <slot v-show="echartShowStatus == 2"></slot>
    <div
      class="noechartData"
      v-show="echartShowStatus===3"
    >
      <img
        src="@/assets/nochartDate.png"
        alt
      />
      <p>{{ $t('noData') }}</p>
    </div>
  </div>
</template>
<script>
export default {
  // echart图状态
  props: {
    echartShowStatus: {
      type: Number,
      required: true
    }
  }
}
</script>
<style lang="less" scoped>
.echartSty {
    height: 100%;
    min-height: 200px;
    color: black !important;
    position: relative;
    .spinSty {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .echartwarp {
      height: 100%;
      width: 100%;
    }

    .noechartData {
      opacity: .2;
      font-size: 1.4rem;
      font-weight: 400;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);

      img {
        width: 32px;
        margin-bottom: 10px;
      }
    }
  }

</style>
